<template>

  <div>

    <el-dialog title="关联属性" :visible.sync="dialogTableVisible" @close="dialogClose">
      <el-button @click="addAssociationHandler">添加关联</el-button>
      <el-table :data="relationList" @selection-change="selectionChangeHandle">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>

        <el-table-column property="attrGroupName" label="组名" width="100">

        </el-table-column>
        <el-table-column property="attrName" label="属性名" width="150">

        </el-table-column>
        <el-table-column property="attrSort" label="排序" width="200">
          <template slot-scope="slot">
            <el-input-number v-model="slot.row.attrSort" :min="0" size="small"
                             @change="slot.row.confirmUpdateVisible = true"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="slot">
            <el-button @click="deleteRelation(slot.row)" type="warning" size="small">删除</el-button>
            <el-button @click="confirmUpdate(slot.row)" type="success" size="small"
                       v-show="slot.row.confirmUpdateVisible">确认更新
            </el-button>

          </template>

        </el-table-column>
      </el-table>

    </el-dialog>
    <add-association-attr ref="associateDialogRef"
                          v-show="addAssociationAttrVisible"
                          @update-relation="getRelationList(attrGroupId)"></add-association-attr>
  </div>

</template>

<script>
import attrGroupRelationApi from '../../../../api/product/attrGroupRelationApi'
import addAssociationAttr from './addAssociationAttr'

export default {
  name: 'associatedAttrList',
  components: {
    addAssociationAttr
  },
  data () {
    return {
      formLabelWidth: '120px',
      dialogTableVisible: false,
      relationList: [],
      currentPage: 1,
      size: 10,
      attrGroupId: null,
      addAssociationAttrVisible: false,
      selectedRowList: [],

    }
  },
  methods: {
    async getRelationList (attrGroupId) {
      if (attrGroupId) {
        this.attrGroupId = attrGroupId
      }
      let p = await attrGroupRelationApi.getInfo(null, this.currentPage, this.size, this.attrGroupId)
      console.log('与attrGroupId有关的属性列表', p.data)

      this.relationList = p.data.page.list

    },
    dialogClose () {
      this.relationList.length = 0

    },
    deleteRelation (row) {

      this.$confirm(`此操作将永久删除${row.attrGroupName}与${row.attrName}之间的联系, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        attrGroupRelationApi.deleteRelation(row.id).then(({data}) => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getRelationList()
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async confirmUpdate (row) {
      let p = await attrGroupRelationApi.updateRelation(row.id, row.attrSort)
      this.$message({
        message: `${row.attrName}的排序已经更新为${row.attrSort}`,
        type: 'success'
      })
      this.getRelationList()
    },

    selectionChangeHandle (selection) {

      this.selectedRowList = selection
      //console.log(selection);
      this.deleteBatchAvailable = true
    },

    addAssociationHandler () {
      this.addAssociationAttrVisible = true
      this.$nextTick(() => {
        this.$refs.associateDialogRef.associateGroupRelationVisible = true;
        this.$refs.associateDialogRef.getAvailableAttrForAssociation(this.attrGroupId);
      })
    }

  },
}
</script>

<style scoped>

</style>
